<template>
  <div class="wrapperBox">
    <hr size="2" color="#ccc" style="width: 94%;position: absolute;top: 65px;opacity: .4;" />
    <div class="contentBox">
      <div class="headTitle">
        <h3 class="title">设置项详情</h3>
        <div class="btnGroups">
          <button class="ake_btn ake_btn_text" @click.stop="submitForm()">保存</button>
          <button class="ake_btn ake_btn_text" @click.stop="cancelForm()">取消</button>
        </div>
      </div>
      <div class="itemsBox">
        <template v-for="index in 6">
          <div class="upBox" :key="index">
            <h3>{{exactImgList[index-1].title}}</h3>
            <div class="picBox" :class="['size'+index]">
              <button class @click.stop="editForm()">编辑</button>
              <input
                type="file"
                name="file"
                accept="image/png, image/jpeg, image/jpg"
                @change="showPreview($event,index-1,exactImgList[index-1].size)"
              />
              <img id="portrait" :src="imgList[index-1].base64" />
            </div>
            <div class="detailBox">
              <p class="limit">
                <span>规格：({{exactImgList[index-1].reqiure}})px (png/jpeg)</span>
                <!-- <span class="limitSize">大小
                <={ {exactImgList[index-1].size}} kb</span>-->
                <span class="limitSize">大小:<= {{exactImgList[index-1].size}} kb</span>
              </p>
              <!-- <p v-if="exactImgList[index-1].url">{{exactImgList[index-1].url}}</p> -->
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";
import { mapGetters, mapMutations, mapState } from "vuex";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";

import api from "../../fetch/api";

export default {
  mixins: [common, stardardList],
  data() {
    return {
      imgList: [
        { name: "", base64: "" },
        { name: "", base64: "" },
        { name: "", base64: "" },
        { name: "", base64: "" },
        { name: "", base64: "" },
        { name: "", base64: "" }
      ],
      exactImgList: [
        {
          title: "LOGO",
          size: "200",
          url: "登录地址：http://localhost:3000/#/authz/logo_config",
          reqiure: "180*80",
          className: "fff"
        },
        {
          title: "登录页图片",
          size: "200",
          url: "登录地址：http://localhost:3000/#/authz/logo_config",
          reqiure: "1246*906",
          className: "fff"
        },
        {
          title: "登录后首页默认图片",
          size: "200",
          url: "登录地址：http://localhost:3000/#/authz/logo_config",
          reqiure: "750*456",
          className: "fff"
        },
        {
          title: "商户端登录页图片",
          size: "200",
          url: "登录地址：http://localhost:3000/#/authz/logo_config",
          reqiure: "690*660",
          className: "fff"
        },
        {
          title: "决策端登录页图片",
          size: "200",
          url: "登录地址：http://localhost:3000/#/authz/logo_config",
          reqiure: "690*660",
          className: "fff"
        },
        {
          title: "微信岗亭端登陆页默认图片",
          size: "200",
          url: "登录地址：http://localhost:3000/#/authz/logo_config",
          reqiure: "690*660",
          className: "fff"
        }
      ]
    };
  },
  computed: {
    ...mapState(["logoObj"])
  },
  created() {
    this.getImages();
  },
  methods: {
    ...mapMutations(["setLogoObj"]),

    showPreview(source, index, size) {
      let _this = this;
      let file = source.target.files[0];
      console.log(file);
      if (
        window.FileReader &&
        file.size / 1000 <= size &&
        /^(jpeg|png|jpg)$/.test(file.type.split("/")[1])
      ) {
        var fr = new FileReader();
        fr.onloadend = function(e) {
          _this.imgList[index].base64 = e.target.result;
          _this.imgList[index].name = file.name;
        };
        fr.readAsDataURL(file);
      } else {
        _this.showToast("请检查图片的类型和大小是否正确", 2, 2000);
      }
    },
    getImages(aparams) {
      let self = this,
        params = {};
      self.imgList = [
        { name: "", base64: "" },
        { name: "", base64: "" },
        { name: "", base64: "" },
        { name: "", base64: "" },
        { name: "", base64: "" },
        { name: "", base64: "" }
      ];
      params = $.extend({}, params, aparams);
      api.fetchGet("/skin/config.do", params).then(
        res => {
          let data = res.data;
          self.imgList[0].base64 = data.logoImg;
          self.imgList[1].base64 = data.loginImg;
          self.imgList[2].base64 = data.homepageImg;
          self.imgList[3].base64 = data.merchantLoginImg;
          self.imgList[4].base64 = data.decisionLoginImg;
          self.imgList[5].base64 = data.wechatBoxLoginImg;
          self.setLogoObj(data);
        },
        err => {}
      );
    },
    submitForm() {
      let self = this;

      let params = {
        logoImgName: "",
        logoImg: "",
        loginImgName: "",
        loginImg: "",
        homepageImgName: "",
        homepageImg: "",
        merchantLoginImgName: "",
        merchantLoginImg: "",
        decisionLoginImgName: "",
        decisionLoginImg: "",
        wechatBoxLoginImgName: "",
        wechatBoxLoginImg: ""
      };
      params.logoImgName = self.imgList[0]["name"];
      if (self.imgList[0]["base64"] == undefined) {
        params.logoImg = "";
      } else {
        params.logoImg = self.imgList[0]["base64"].split(";base64,")[1]
          ? self.imgList[0]["base64"].split(";base64,")[1]
          : "";
      }

      params.loginImgName = self.imgList[1]["name"];
      if (self.imgList[1]["base64"] == undefined) {
        params.loginImg = "";
      } else {
        params.loginImg = self.imgList[1]["base64"].split(";base64,")[1]
          ? self.imgList[1]["base64"].split(";base64,")[1]
          : "";
      }

      params.homepageImgName = self.imgList[2]["name"];
      if (self.imgList[2]["base64"] == undefined) {
        params.homepageImg = "";
      } else {
        params.homepageImg = self.imgList[2]["base64"].split(";base64,")[1]
          ? self.imgList[2]["base64"].split(";base64,")[1]
          : "";
      }

      params.merchantLoginImgName = self.imgList[3]["name"];
      if (self.imgList[3]["base64"] == undefined) {
        params.merchantLoginImg = "";
      } else {
        params.merchantLoginImg = self.imgList[3]["base64"].split(";base64,")[1]
          ? self.imgList[3]["base64"].split(";base64,")[1]
          : "";
      }

      params.decisionLoginImgName = self.imgList[4]["name"];
      if (self.imgList[4]["base64"] == undefined) {
        params.decisionLoginImg = "";
      } else {
        params.decisionLoginImg = self.imgList[4]["base64"].split(";base64,")[1]
          ? self.imgList[4]["base64"].split(";base64,")[1]
          : "";
      }

      params.wechatBoxLoginImgName = self.imgList[5]["name"];
      if (self.imgList[5]["base64"] == undefined) {
        params.wechatBoxLoginImg = "";
      } else {
        params.wechatBoxLoginImg = self.imgList[5]["base64"].split(
          ";base64,"
        )[1]
          ? self.imgList[5]["base64"].split(";base64,")[1]
          : "";
      }

      api.fetchPost("/skin/logo/save.do", params).then(
        res => {
          //start
          var data = res;
          if (data.status == 1) {
            self.showToast("LOGO设置成功", 1);
            self.getImages();
          } else {
            self.showToast(data.message, 2);
          }
          //end
        },
        err => {}
      );
    },
    cancelForm() {
      this.imgList = [
        { name: "", base64: "" },
        { name: "", base64: "" },
        { name: "", base64: "" },
        { name: "", base64: "" },
        { name: "", base64: "" },
        { name: "", base64: "" }
      ];
      this.getImages();
    }
  }
};
</script>

<style lang="less">
.position(@opacity) {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 50px;
  height: 25px;
  opacity: @opacity;
}
.router-wrapper {
  overflow: auto;
}
.wrapperBox {
  display: flex;
  justify-content: center;
  width: 100%;
  overflow: auto;
  flex-direction: column;
  align-items: center;
  .headTitle {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    height: 80px;
    margin-bottom: 10px;
    .title {
      margin-right: 35px;
    }
  }
  .upBox {
    width: 500px;
    padding: 20px 50px;
    background-color: rgb(248, 247, 247);
    border-radius: 5px;
    border: #ccc 1px solid;
    margin-bottom: 15px;
    h3 {
      margin-bottom: 10px;
    }
    .picBox {
      position: relative;
      width: 30%;
      padding-top: 30%;
      border-radius: 5px;
      border: 1px #ccc solid;
      overflow: hidden;
      &.size1 {
        width: 65%;
      }
      &.size2 {
        width: 40%;
        padding-top: 40%;
      }
      &.size3 {
        width: 60%;
        padding-top: 40%;
      }
      &.size4 {
        width: 60%;
        padding-top: 40%;
      }
      &.size5 {
        width: 40%;
        padding-top: 40%;
      }
      button {
        .position(0.8);
        width: 50px;
        height: 24px;
        font-size: 14px;
        color: white;
        background-color: black;
        border: none;
        border-radius: 5px;
        z-index: 5;
      }
      input {
        .position(0);
        z-index: 10;
      }
      img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
    }
    .detailBox {
      margin-top: 10px;
      font-weight: bold;
      p {
        padding: 3px 0;
      }
      .limitSize {
        color: rgb(21, 80, 207);
        margin-left: 20px;
      }
    }
  }
}
</style>